Chart.js এর বাবল চার্ট (Bubble Chart) ব্যবহার করে আপনি ডেটার পয়েন্টগুলিকে X, Y, এবং Size অনুযায়ী প্লট করতে পারেন। এখানে, বাবল চার্টের প্রতিটি পয়েন্টের আকার এবং রঙ কাস্টমাইজ করা যেতে পারে। বাবল চার্টে Z ভ্যালু প্রতিটি বুদবুদ (Bubble) এর আকার নির্ধারণ করে, এবং backgroundColor এর মাধ্যমে বুদবুদগুলোর রঙ নির্ধারণ করা হয়।
এখানে Chart.js ব্যবহার করে Bubbles এর Size এবং Color কাস্টমাইজ করার ধাপগুলো আলোচনা করা হলো।
বাবল চার্টের কনফিগারেশন
বাবল চার্টে, প্রতি ডেটা পয়েন্টের জন্য ৩টি ভ্যালু ব্যবহৃত হয়:
- X-অক্ষের মান (x)
- Y-অক্ষের মান (y)
- Bubbles এর আকার (r) - এটি প্রতিটি বুদবুদের আকার নির্ধারণ করে।
Chart.js এর মাধ্যমে আপনি সহজেই বুদবুদ (Bubble) এর আকার এবং রঙ কাস্টমাইজ করতে পারেন।
১. বাবল চার্ট কনফিগারেশন তৈরি করা
প্রথমে একটি HTML ফাইল তৈরি করুন, যেখানে <canvas> এলিমেন্ট থাকবে, এবং তারপর জাভাস্ক্রিপ্ট ফাইলে চার্টের কনফিগারেশন তৈরি করুন।
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bubble Chart Example</title>
</head>
<body>
<h1>Bubble Chart with Custom Size and Color</h1>
<canvas id="myBubbleChart" width="400" height="400"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="script.js"></script>
</body>
</html>
২. JavaScript: বাবল চার্ট তৈরি এবং কাস্টমাইজেশন
এখন JavaScript ফাইলে বাবল চার্টের কনফিগারেশন তৈরি করুন। এখানে আমরা Bubble Size এবং Color কাস্টমাইজ করবো।
script.js:
const ctx = document.getElementById('myBubbleChart').getContext('2d');
const myBubbleChart = new Chart(ctx, {
type: 'bubble', // Chart type: Bubble
data: {
datasets: [{
label: 'My Bubble Chart', // Dataset label
data: [
{x: 10, y: 20, r: 15}, // Bubble 1 (X: 10, Y: 20, Radius: 15)
{x: 20, y: 25, r: 25}, // Bubble 2 (X: 20, Y: 25, Radius: 25)
{x: 30, y: 40, r: 10}, // Bubble 3 (X: 30, Y: 40, Radius: 10)
{x: 40, y: 35, r: 30}, // Bubble 4 (X: 40, Y: 35, Radius: 30)
{x: 50, y: 50, r: 20} // Bubble 5 (X: 50, Y: 50, Radius: 20)
],
backgroundColor: [
'rgba(255, 99, 132, 0.6)', // Red
'rgba(54, 162, 235, 0.6)', // Blue
'rgba(255, 206, 86, 0.6)', // Yellow
'rgba(75, 192, 192, 0.6)', // Green
'rgba(153, 102, 255, 0.6)' // Purple
],
borderColor: [
'rgba(255, 99, 132, 1)', // Red
'rgba(54, 162, 235, 1)', // Blue
'rgba(255, 206, 86, 1)', // Yellow
'rgba(75, 192, 192, 1)', // Green
'rgba(153, 102, 255, 1)' // Purple
],
borderWidth: 1
}]
},
options: {
responsive: true, // Make the chart responsive
scales: {
x: {
min: 0, // Set minimum X value
max: 60, // Set maximum X value
},
y: {
min: 0, // Set minimum Y value
max: 60, // Set maximum Y value
}
}
}
});
ব্যাখ্যা:
data:- এখানে আমরা X, Y, এবং r (radius) দিয়ে পাঁচটি বুদবুদ ডেটা পয়েন্ট তৈরি করেছি।
- X এবং Y হল বুদবুদের অবস্থান এবং r হল বুদবুদের আকার (radius)।
backgroundColorএবংborderColorএর মাধ্যমে প্রতিটি বুদবুদের রঙ কাস্টমাইজ করা হয়েছে।
scales:- X এবং Y অক্ষের স্কেল কাস্টমাইজ করা হয়েছে। এখানে
minএবংmaxমান সেট করা হয়েছে, যার মাধ্যমে চার্টের এক্স এবং ওয়াই অক্ষের সীমা নির্ধারণ করা হয়েছে।
- X এবং Y অক্ষের স্কেল কাস্টমাইজ করা হয়েছে। এখানে
borderWidth: বুদবুদের বর্ডারের প্রস্থ নির্ধারণ করতে ব্যবহার করা হয়েছে।
৩. বাবল চার্টের কাস্টমাইজেশন:
- Bubble Size (r):
rভ্যালুর মাধ্যমে আপনি বুদবুদের আকার পরিবর্তন করতে পারেন। উচ্চ মানের জন্য বড় বুদবুদ এবং কম মানের জন্য ছোট বুদবুদ তৈরি হয়।
- Bubble Color (backgroundColor):
backgroundColorপ্রোপার্টি ব্যবহার করে আপনি প্রতিটি বুদবুদের রঙ কাস্টমাইজ করতে পারেন। আপনিrgba()রঙের মাধ্যমে স্বচ্ছতার সাথেও রঙ নির্ধারণ করতে পারেন।
৪. বাবল চার্টে আরও কাস্টমাইজেশন:
এছাড়াও আপনি বাবল চার্টে আরও কাস্টমাইজেশন করতে পারেন যেমন:
- Bubble Border Width: বুদবুদের বর্ডার প্রস্থ পরিবর্তন করতে।
- Hover Effects: ব্যবহারকারীর হোভার করার সময় বুদবুদের আকার বা রঙ পরিবর্তন করতে।
Hover Effects উদাহরণ:
options: {
responsive: true,
plugins: {
tooltip: {
enabled: true
}
},
hover: {
mode: 'nearest',
intersect: true,
onHover: function(event, chartElement) {
chartElement[0]._model.radius = 30; // Hover effect: increase radius
}
},
scales: {
x: {
min: 0,
max: 60
},
y: {
min: 0,
max: 60
}
}
}
সারাংশ
Chart.js দিয়ে বাবল চার্ট তৈরি করা খুবই সহজ এবং এর মাধ্যমে আপনি ডেটার ভিজ্যুয়ালাইজেশন খুবই কার্যকরভাবে করতে পারেন। Bubble Size এবং Color কাস্টমাইজেশন দ্বারা আপনি আপনার ডেটার ভিজ্যুয়াল আউটপুটকে আরও আকর্ষণীয় এবং বোধগম্য করতে পারবেন।
